<template>
	<div class="max-w-md mx-auto p-4">
		<h1 class="text-xl font-bold mb-4">
			{{ languageType == 'English' ? 'ULink Payment' : 'ULink Ödeme ' }}
		</h1>

		<!-- Product Name -->
		<!-- <div class="mb-2">
			<label class="block font-semibold mb-1">
				{{ languageType == 'English' ? 'Product Name' : 'Ürün Adı' }}
			</label>
			<input v-model="form.goodsName"
				class="w-full border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 rounded outline-none"
				type="text" :placeholder="languageType == 'English' ? 'Wong Lo Kat' : 'Wong Lo Kat'" />
		</div> -->

		<!-- Payment Amount -->
		<div class="mb-2">
			<label class="block font-semibold mb-1">
				{{ languageType == 'English' ? 'Payment Amount' : 'Ödeme Tutarı' }}
			</label>
			<input v-model="form.fiatAmt"
				class="w-full border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 rounded outline-none"
				type="number" step="0.01" :placeholder="languageType == 'English' ? '50.00' : '50.00'" />
		</div>

		<!-- Fiat Currency -->
		<div class="mb-2">
			<label class="block font-semibold mb-1">
				{{ languageType == 'English' ? 'Fiat Currency' : 'Fiat Para Birimi' }}
			</label>
			<select v-model="form.fiatCurr"
				class="w-full border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 rounded outline-none">
				<option value="USD">USD</option>
				<option value="GBP">GBP</option>
				<option value="EUR">EUR</option>
				<option value="TRY">TRY</option>
				<option value="JPY">JPY</option>
				<option value="KZT">KZT</option>
				<option value="CNY">CNY</option>
			</select>
		</div>

		<!-- Crypto Currency -->
		<div class="mb-2">
			<label class="block font-semibold mb-1">
				{{ languageType == 'English' ? 'Crypto Currency' : 'Kripto Para Birimi' }}
			</label>
			<select v-model="form.cryptoCurr"
				class="w-full border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 rounded outline-none">
				<option value="TRC20_USDT">TRC20_USDT</option>
				<option value="ERC20_USDT">ERC20_USDT</option>
				<option value="BNB">BNB</option>
			</select>
		</div>

		<!-- User IP -->
		<!-- <div class="mb-2">
			<label class="block font-semibold mb-1">
				{{ languageType == 'English' ? 'User IP' : 'Kullanıcı IP' }}
			</label>
			<input v-model="form.userIp"
				class="w-full border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 rounded outline-none"
				type="text" :placeholder="languageType == 'English' ? '127.0.0.1' : '127.0.0.1'" />
		</div> -->

		<!-- Button -->
		<button @click="createOrder"
			class="w-full bg-blue-500 text-white p-2 rounded mt-4 hover:bg-blue-600 disabled:opacity-50"
			:disabled="loading">
			{{ loading
				? (languageType == 'English' ? 'Generating...' : 'Oluşturuluyor...')
				: (languageType == 'English' ? 'Create Order and Pay' : 'Sipariş Oluştur ve Öde') }}
		</button>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useFetchApi
	} from '@/composables/useFetchApi'
	import {
		useLanguage
	} from '~/composables/useLanguage'

	const {
		languageType
	} = useLanguage()
	const {
		post
	} = useFetchApi()
	const loading = ref(false)

	onMounted(() => {
		const savedLang = localStorage.getItem('languageType')
		if (savedLang) {
			languageType.value = savedLang
		}
	})

	const form = ref({
		goodsName: 'chat fee',
		fiatAmt: '20.00',
		fiatCurr: 'USD',
		cryptoCurr: 'TRC20_USDT',
		userIp: 'd982f8f2-0558-443b-a069-958dbd34b163',
	})

	const createOrder = async () => {
		loading.value = true
		try {
			const res = await post('/api/ulink/order/create', form.value)
			if (res.code === 0 && res.payUrl) {
				window.location.href = res.payUrl
			} else {
				alert(
					(languageType.value == 'English' ?
						'Failed to create order: ' :
						'Sipariş oluşturulamadı: ') + res.msg
				)
			}
		} catch (err) {
			console.error(err)
			alert(languageType.value == 'English' ? 'Request error' : 'İstek hatası')
		} finally {
			loading.value = false
		}
	}
</script>

<style scoped>
	@media (max-width: 768px) {
		div {
			padding: 1rem;
		}
	}
</style>